<!--
 * @Author: sz
 * @Date: 2023-10-26 09:16:15
 * @LastEditors: sz
 * @LastEditTime: 2023-11-14 13:57:06
 * @Description: 工作台
-->
<template>
  <div class="workplace">
    <a-row :gutter="[24, 24]" style="margin-top: 0">
      <a-col :sm="24" :md="12" :xl="8">
        <a-card class="chart-card" :loading="user_chart_loading">
          <div class="user-chart-title chart-title" v-show="!user_chart_error">
            <div>
              <div>总人数</div>
              <div class="light">{{ user_chart_data.total }}</div>
            </div>
            <div>
              <div>实名总数</div>
              <div class="light">{{ user_chart_data.real_total }}</div>
            </div>
            <div>
              <div>本月新增{{ user_chart_data.month_new }}</div>
              <div>今日新增{{ user_chart_data.today_new }}</div>
              <div>昨日新增{{ user_chart_data.yesterday_new }}</div>
            </div>
          </div>
          <div class="user-statistics-chart" v-show="!user_chart_error">
            <v-chart :option="user_chart_data.real_level" class="chart"></v-chart>
          </div>
          <a-empty v-show="user_chart_error">
            <a-icon type="alert" slot="image" :style="{ fontSize: '80px', color: '#ff7875' }" />
            <span slot="description">
              {{ $t('load_error') }}
              <a-icon type="reload" :style="{ color: '#40a9ff', cursor: 'pointer' }" @click="getUserChartData"
            /></span>
          </a-empty>
        </a-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="8">
        <a-card class="chart-card" :loading="plans_chart_loading">
          <div class="plans-chart-title chart-title" v-show="!plans_chart_error">
            <div>
              <div>{{ plans_type_name }}计划总数</div>
              <div class="light">{{ plans_chart_data.total }}</div>
            </div>
            <div>
              <div style="cursor: pointer">
                <a-dropdown :trigger="['click']">
                  <div>{{ month_total_name }}总数<a-icon type="down" /></div>
                  <a-menu slot="overlay">
                    <a-menu-item key="current_month" @click="month_total_key = 'current_month'"> 本月总数 </a-menu-item>
                    <a-menu-item key="last_month" @click="month_total_key = 'last_month'"> 上月总数 </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </div>
              <div class="light">{{ plans_chart_data[month_total_key] }}</div>
            </div>
            <div>
              <a-select
                :default-value="{ key: 'submit' }"
                style="width: 120px"
                @change="changePlansType"
                :value="plans_type"
              >
                <a-select-option value="submit"> 提交计划 </a-select-option>
                <a-select-option value="execute"> 执行计划 </a-select-option>
              </a-select>
            </div>
          </div>
          <div class="plans-statistics-chart" v-show="!plans_chart_error">
            <v-chart class="chart" :option="plans_chart_data.days"></v-chart>
          </div>
          <a-empty v-show="plans_chart_error">
            <a-icon type="alert" slot="image" :style="{ fontSize: '80px', color: '#ff7875' }" />
            <span slot="description">
              {{ $t('load_error') }}
              <a-icon type="reload" :style="{ color: '#40a9ff', cursor: 'pointer' }" @click="getPlansChartData"
            /></span>
          </a-empty>
        </a-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="8">
        <a-card class="chart-card" :loading="repayment_chart_loading">
          <div class="chart-title" v-show="!repayment_chart_error">
            <div>
              <div>{{ repayment_type_name }}总交易量</div>
              <div class="light">{{ repayment_chart_data.total }}</div>
            </div>
            <div>
              <div style="cursor: pointer">
                <a-dropdown :trigger="['click']">
                  <div>{{ repayment_month_total_name }}交易量<a-icon type="down" /></div>
                  <a-menu slot="overlay">
                    <a-menu-item key="current_month" @click="repayment_month_total_key = 'current_month'">
                      本月交易量
                    </a-menu-item>
                    <a-menu-item key="last_month" @click="repayment_month_total_key = 'last_month'">
                      上月交易量
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </div>
              <div class="light">{{ repayment_chart_data[repayment_month_total_key] }}</div>
            </div>
            <div>
              <a-select
                :default-value="{ key: 'repayment' }"
                style="width: 120px"
                @change="changeRepaymentType"
                :value="repayment_type"
              >
                <a-select-option value="repayment"> 代还交易 </a-select-option>
                <a-select-option value="quick"> 快捷交易 </a-select-option>
              </a-select>
            </div>
          </div>
          <div class="repayment-chart" v-show="!repayment_chart_error">
            <v-chart class="chart" :option="repayment_chart_data.days" ref="r-chart"></v-chart>
          </div>
          <a-empty v-show="repayment_chart_error">
            <a-icon type="alert" slot="image" :style="{ fontSize: '80px', color: '#ff7875' }" />
            <span slot="description">
              {{ $t('load_error') }}
              <a-icon type="reload" :style="{ color: '#40a9ff', cursor: 'pointer' }" @click="getRepaymentChartData"
            /></span>
          </a-empty>
        </a-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="8">
        <a-card class="chart-card" :loading="withdraw_chart_loading">
          <div class="chart-title">
            <div>
              <div>累计提现金额</div>
              <div class="light">{{ withdraw_chart_data.total }}</div>
            </div>
            <div>
              <div>累计可提现金额</div>
              <div class="light">{{ withdraw_chart_data.total_money }}</div>
            </div>
            <div>
              <div style="cursor: pointer">
                <a-dropdown :trigger="['click']">
                  <div>{{ withdraw_month_total_name }}提现金额<a-icon type="down" /></div>
                  <a-menu slot="overlay">
                    <a-menu-item key="current_month" @click="withdraw_month_total_key = 'current_month'">
                      本月提现金额
                    </a-menu-item>
                    <a-menu-item key="last_month" @click="withdraw_month_total_key = 'last_month'">
                      上月提现金额
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </div>
              <div class="light">{{ withdraw_chart_data[withdraw_month_total_key] }}</div>
            </div>
          </div>
          <div class="withdraw-chart">
            <v-chart class="chart" :option="withdraw_chart_data.days"></v-chart>
          </div>
          <a-empty v-show="withdraw_chart_error">
            <a-icon type="alert" slot="image" :style="{ fontSize: '80px', color: '#ff7875' }" />
            <span slot="description">
              {{ $t('load_error') }}
              <a-icon type="reload" :style="{ color: '#40a9ff', cursor: 'pointer' }" @click="getWithdrawChartData"
            /></span>
          </a-empty>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { userCount, repaymentCount, repaymentTurnover, expressTurnover, withdrawalTurnover } from '@/services/dashboard'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, BarChart, LineChart } from 'echarts/charts'
import {
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DatasetComponent,
  ToolboxComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  PieChart,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DatasetComponent,
  BarChart,
  ToolboxComponent,
  LineChart
])

export default {
  name: 'WorkPlace',
  components: { VChart },
  i18n: require('./i18n'),
  data() {
    return {
      user_chart_loading: false, // 用户统计loading
      user_chart_error: false, // 用户统计加载是否出错
      user_chart_data: {}, // 用户统计数据
      plans_type: 'submit', // 计划类型
      plans_chart_loading: false, // 计划统计loading
      plans_chart_error: false,
      plans_chart_data: {}, // 计划数据
      month_total_key: 'current_month', // 月份统计数据key
      repayment_chart_loading: false, // 代还交易loading
      repayment_chart_error: false, // 代还交易加载是否出错
      repayment_chart_data: {}, // 代还交易数据
      repayment_type: 'repayment', // 代还交易类型
      repayment_month_total_key: 'current_month', // 月份统计数据key
      withdraw_chart_loading: false, // 提现统计loading
      withdraw_chart_error: false, // 提现统计加载是否出错
      withdraw_chart_data: {}, // 提现统计数据
      withdraw_month_total_key: 'current_month' // 月份统计数据key
    }
  },
  computed: {
    month_total_name: vm => {
      let name = '本月'
      switch (vm.month_total_key) {
        case 'current_month':
          name = '本月'
          break
        case 'last_month':
          name = '上月'
          break
      }
      return name
    },
    plans_type_name: vm => {
      let name = '提交'
      switch (vm.plans_type) {
        case 'submit':
          name = '提交'
          break
        case 'execute':
          name = '执行'
          break
      }
      return name
    },
    repayment_month_total_name: vm => {
      let name = '本月'
      switch (vm.repayment_month_total_key) {
        case 'current_month':
          name = '本月'
          break
        case 'last_month':
          name = '上月'
          break
      }
      return name
    },
    repayment_type_name: vm => {
      let name = '代还'
      switch (vm.repayment_type) {
        case 'repayment':
          name = '代还'
          break
        case 'quick':
          name = '快捷'
          break
      }
      return name
    },
    withdraw_month_total_name: vm => {
      let name = '本月'
      switch (vm.withdraw_month_total_key) {
        case 'current_month':
          name = '本月'
          break
        case 'last_month':
          name = '上月'
          break
      }
      return name
    }
  },
  methods: {
    // 用户统计
    async getUserChartData() {
      this.user_chart_error = false
      try {
        this.user_chart_loading = true
        const user = await userCount()
        user.data.real_level = user.data.real_level.map(item => {
          return { name: item.name + '(id:' + item.id + ')', value: item.count }
        })
        // echarts 配置 饼状图
        let chart_option = {
          tooltip: {
            show: true,
            trigger: 'item'
          },
          legend: {
            bottom: '0',
            left: 'center',
            itemWidth: 10,
            itemHeight: 10
          },
          series: [
            {
              type: 'pie',
              radius: ['50%', '60%'],
              startAngle: 60,
              minAngle: 10,
              label: {
                show: true
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 16,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: true,
                showAbove: true,
                smooth: true
              },
              data: user.data.real_level
            }
          ]
        }
        user.data.real_level = chart_option
        this.user_chart_data = user.data
      } catch (e) {
        this.user_chart_error = true
      }
      this.user_chart_loading = false
    },
    // 计划统计
    async getPlansChartData() {
      this.plans_chart_error = false
      try {
        this.plans_chart_loading = true
        const plans = await repaymentCount({ type: this.plans_type })
        let chart_option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          dataset: {
            source: plans.data.days,
            dimensions: ['date', 'count']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                interval: 0,
                formatter: function (value, index) {
                  var date = new Date(value)
                  return date.getMonth() + 1 + '.' + date.getDate()
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: this.plans_type_name + '计划数量',
              type: 'bar',
              barWidth: '60%',
              label: {
                show: true,
                position: 'top'
              }
            }
          ]
        }
        plans.data.days = chart_option
        this.plans_chart_data = plans.data
      } catch (e) {
        this.plans_chart_error = true
      }
      this.plans_chart_loading = false
    },
    // 切换计划类型
    changePlansType(e) {
      this.plans_type = e
      this.getPlansChartData()
    },
    // 代还交易统计
    async getRepaymentChartData() {
      this.repayment_chart_error = false
      try {
        this.repayment_chart_loading = true
        let repayment
        if (this.repayment_type == 'repayment') {
          repayment = await repaymentTurnover()
        } else {
          repayment = await expressTurnover()
        }
        let chart_option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            bottom: '0',
            left: 'center'
          },
          dataset: {
            source: repayment.data.days,
            dimensions: ['date', 'turnover', 'count']
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                interval: 0,
                formatter: function (value, index) {
                  var date = new Date(value)
                  return date.getMonth() + 1 + '.' + date.getDate()
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                formatter: function (val) {
                  return val / 10000 + 'w'
                }
              }
            },
            {
              type: 'value',
              position: 'right'
            }
          ],
          series: [
            {
              name: this.repayment_type_name + '交易量',
              type: 'bar',
              barWidth: '60%',
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#6d8ae8'
                    },
                    {
                      offset: 1,
                      color: '#bfece2'
                    }
                  ],
                  global: false
                }
              }
            },
            {
              name: '还款笔数',
              type: 'line',
              yAxisIndex: 1,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#6d8ae8'
                    },
                    {
                      offset: 1,
                      color: '#bfece2'
                    }
                  ],
                  global: false
                }
              }
            }
          ]
        }
        repayment.data.days = chart_option
        this.repayment_chart_data = repayment.data
      } catch (e) {
        this.repayment_chart_error = true
      }
      this.repayment_chart_loading = false
    },
    // 切换交易类型
    changeRepaymentType(e) {
      this.repayment_type = e
      this.getRepaymentChartData()
    },
    // 提现统计
    async getWithdrawChartData() {
      this.withdraw_chart_error = false
      try {
        this.withdraw_chart_loading = true
        const withdraw = await withdrawalTurnover()
        let chart_option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            bottom: '0',
            left: 'center'
          },
          dataset: {
            source: withdraw.data.days,
            dimensions: ['date', 'profit', 'turnover', 'count']
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                interval: 0,
                formatter: function (value, index) {
                  var date = new Date(value)
                  return date.getMonth() + 1 + '.' + date.getDate()
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {},
              position: 'left'
            },
            {
              type: 'value',
              position: 'right'
            }
          ],
          series: [
            {
              name: '今日收益',
              type: 'bar',
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#6d8ae8'
                    },
                    {
                      offset: 1,
                      color: '#bfece2'
                    }
                  ],
                  global: false
                }
              }
            },
            {
              name: '今日提现',
              type: 'bar',
              yAxisIndex: 0,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#ff8786'
                    },
                    {
                      offset: 1,
                      color: '#f9cf83'
                    }
                  ],
                  global: false
                }
              }
            },
            {
              name: '提现笔数',
              type: 'bar',
              yAxisIndex: 1,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#7386ff'
                    },
                    {
                      offset: 1,
                      color: '#caadfb'
                    }
                  ],
                  global: false
                }
              }
            }
          ]
        }
        withdraw.data.days = chart_option
        this.withdraw_chart_data = withdraw.data
      } catch (e) {
        this.withdraw_chart_error = true
      }
      this.withdraw_chart_loading = false
    }
  },
  mounted() {
    this.getUserChartData()
    this.getPlansChartData()
    this.getRepaymentChartData()
    this.getWithdrawChartData()
  }
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>
